<script setup>
import {ref} from "vue";

const targetList = [
  {
    img: "",
    name: 'RabbitMQ',
  },
  {
    img: "",
    name: 'Kafka',
  },
  {
    img: "",
    name: 'Redis',
  },
  {
    img: "",
    name: 'Http',
  },
  {
    img: "",
    name: 'Cpu',
  },
  {
    img: "",
    name: 'Mem',
  },
  {
    img: "",
    name: 'Disk',
  },
  {
    img: "",
    name: 'Postgresql',
  },
  {
    img: "",
    name: 'JVM',
  },
]

let dialogTableVisible = ref(false)
let dialogFormVisible = ref(false)

const onCollector = () => {
  dialogTableVisible.value = true
  console.log('submit!')
}

</script>

<template>
  <div class="guards-header">
    <el-input clearable style="width: 210px"/>
    <el-button type="primary">Query</el-button>
    <el-button type="primary">New</el-button>
  </div>
  <div class="guards-main">
    <el-card
        shadow="hover"
        v-for="target in targetList" style="width: 400px; height: 300px; margin: 5px">
      <template #header>
        <div class="">
          <span>{{ target.name }}</span>
        </div>
      </template>
      <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
      <template #footer>
        <el-button>Details</el-button>
        <el-button @click="onCollector()">Collector</el-button>
      </template>
    </el-card>
  </div>
  <div class="guards-footer">
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="1000"/>
  </div>
  <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
    <component :is="tabs[currentTab]"></component>
  </el-dialog>

</template>

<style scoped>
.guards-main {
  flex-wrap: wrap;
}
</style>